<template>
 
    
    <el-container>
        <el-header>
            <el-row>
				<!-- 网站的标题 -->
				<el-col :span="7" class="title">
				  <router-link :to="{path:'index'}">Movielens</router-link>
				</el-col>
			
				<!-- 搜索框 -->
				<el-col :span="8" >
					<el-input 
					  placeholder="请输入想搜索的电影"
					  prefix-icon="el-icon-search"
					  v-model="searchText"
					  @keyup.enter.native="search">
					</el-input>
				</el-col>
			
				<!-- 搜索按钮 -->
				<el-col :span="4">
				  <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
				</el-col>
			
				<!-- 用户信息 -->
				<el-col :span="5" class="user_info"> 
				  <span >{{username}}</span>
				  <el-dropdown>   
					  <i class="el-icon-setting" style="margin-right: 15px"></i>
					  <el-dropdown-menu slot="dropdown">
						<el-dropdown-item>个人主页面</el-dropdown-item>
						<el-dropdown-item>收藏</el-dropdown-item>
						<el-dropdown-item>历史</el-dropdown-item>
					  </el-dropdown-menu>
					</el-dropdown>
					<el-button type="info" @click="logout">退出登录</el-button>
				</el-col>
			</el-row>
        </el-header>


        <div class="main">
            <router-view></router-view>
        </div>
        
        

        <el-footer>@颜佳兴 164273431</el-footer>
    </el-container>


</template>

<script>
export default {
	created(){		
		this.getUserInfo();
	},
    data(){
        return{
			searchText:"",
			username:"username"
        }
    },
    methods:{
        search(){
            this.$message.success(this.searchText);
		},
		logout(){
			window.sessionStorage.removeItem("token");
			this.$router.push('/login');
		},
		async getUserInfo(){
			const userId=window.sessionStorage.getItem("token");
			let param = new URLSearchParams();
			param.append('userId',userId);
			const result=await this.$axios({
                method: 'post',
				url: 'user',
				data: param
			});
			this.username=result.data.username;
		}

    }
}
</script>

<style lang="less" scoped>

.el-header{
    background-color: #4B4B5A;
}
.el-row{
    padding: 10px;
}
.user_info{
    text-align: center;
}
.title{
    text-align: center;
}
.el-footer{
	text-align: center;
}
</style>